<template>
	<view class="order">
		<block v-if="!boxHide">
			<view class="bar_top">

					<view class="search">
						<view class="search_input">
							<image src="/static/images/search.png" mode=""></image>
							<input type="text" placeholder="请输入关键词" v-model="search" />
							<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
						</view>
						<view class="search_btn" @tap="searchBtn()">搜索</view>
					</view>

					<view class="bar_list">
						<view :class="barNum == 0 ? 'bar_item bar_active' : 'bar_item'" @tap="bar(0)">
							<text>全部</text>
						</view>
						<view :class="barNum == 1 ? 'bar_item bar_active' : 'bar_item'" @tap="bar(1)">
							<text>意向订单</text>
						</view>
						<view :class="barNum == 2 ? 'bar_item bar_active' : 'bar_item'" @tap="bar(2)">
							<text>成交待收</text>
						</view>
						<view :class="barNum == 3 ? 'bar_item bar_active' : 'bar_item'" @tap="bar(3)">
							<text>已经完成</text>
						</view>
					</view>

					<view class="finance_bar">
						<view>查询时间：</view>
						<picker mode="date" fields="day" @change="getStart">
							<view class="finance_bar_picker">
								<view>{{start == "" ? "请选择开始时间" : start}}</view>
								<image src="/static/images/bar_down.png"></image>
							</view>
						</picker>
						<picker mode="date" fields="day" @change="getEnd">
							<view class="finance_bar_picker">
								<view>{{end}}</view>
								<image src="/static/images/bar_down.png"></image>
							</view>
						</picker>
					</view>

			</view>
        
			<view class="order_content">
				<view class="order_card">
					<view class="order_card_list order_card_list1">
						<view class="order_card_item">
							<view>{{price.total_price?price.total_price:0}}元</view>
							<view>订单总额</view>
						</view>
						<view class="order_card_item">
							<view>{{price.received?price.received:0}}元</view>
							<view>订单已收</view>
						</view>
					</view>

					<view class="order_card_list">
						<view class="order_card_item">
							<view>{{price.uncollected?price.uncollected:0}}元</view>
							<view>订单未收</view>
						</view>
						<view class="order_card_item">
							<view>{{price.count?price.count:0}}笔</view>
							<view>订单笔数</view>
						</view>
					</view>
				</view>

				<block v-for="(item,index) in list">
					<!-- <view class="order_item_time">2019-03-10 12:23</view> -->
					<view class="order_item" :key="index">
						<view class="order_item_title" @tap="go('info',item.id)">
							<view class="order_item_title_text">
								<view>{{item.customer_address}}</view>
								<view>{{item.customer_name}}/{{item.customer_title}}</view>
							</view>
							<!-- <image src="/static/images/table.png" mode=""></image> -->
						</view>

						<block v-for="(items,indexs) in item.product_list">
							<view class="order_item_num" :key="index">
								<view>{{items.product_name}}</view>
								<view>数量{{items.number}}</view>
								<!-- <view class="order_item_num_order" v-if="item.status != 0">
									<text>未开出库单数量：2</text><text @tap="go('info')">派工单详情</text>
								</view> -->
							</view>
						</block>

						<view class="order_item_content">
							<image v-if="barNum == 3" src="/static/images/order_type3.png" class="order_item_content_logo"></image>
							<view class="font_item w120">
								<view>收货地址</view>
								<view>{{item.customer_address}}</view>
							</view>
							<view class="font_item w120">
								<view>订单编号</view>
								<view>{{item.order_no}}</view>
							</view>
							<view class="font_item w120">
								<view>开单日期</view>
								<view>{{item.create_at}}</view>
							</view>
							<view class="font_item w120">
								<view>成交日期</view>
								<view><text v-if="item.close_at">{{ item.close_at }}</text><text v-if="!item.close_at">暂无</text></view>
							</view>
							<view class="font_item w120">
								<view>收款期限</view>
								<view>{{item.sk_date?item.sk_date:""}}</view>
							</view>
							<view class="font_item w120">
								<view>交货期限</view>
								<view> <text v-if="item.is_ship==0">{{item.jh_date}}</text> <text v-if="item.is_ship==1">暂无</text></view>
							</view>
							<view class="font_item w120">
								<view>订单进度</view>
								<view class="schedule">
									<picker mode="selector" :range="order_schedule" @change="getPickerValue" class="add_icon_picker" :data-index="index">
										{{item.schedule ? item.schedule : '请选择'}}
									</picker>
								</view>
							</view>
							<view class="font_item w120">
								<view>审核订单</view>
								<view>{{item.desc}}</view>
							</view>

							<view :class="['order_item_price',{'order_item_price_color1':item.type=='意向订单','order_item_price_color2':item.type=='成交待收','order_item_price_color3':item.type=='已经完成'}]">
								<text>¥</text><text>{{item.total_price}}</text><text>（{{item.is_pay == 0 ? "未支付" : "已支付"}}）</text>
							</view>
						</view>
						<view class="order_item_btn">
							<text class="btn1" @tap="open('sendBoxStaus')">发送</text>
							<text class="btn2" @tap="collection(item)" v-if="item.type!='意向订单'">收款</text>
							<text class="btn3" @tap="checkStatus(item)" v-if="(barNum == 0||barNum == 1)&&item.type=='意向订单'">审核成交</text>
							<text class="btn4" @tap="checkOutBtn(item.id)" v-if="barNum == 3">出库</text>
							<text class="btn_more" @tap="open('moreBoxStaus')">更多</text>
						</view>
					</view>
				</block>
			</view>

            <view class="window index999" v-if="sendBoxStaus">
				<view class="bottom_popup">
					<view>短信</view>
					<view>微信</view>
					<view>打印</view>
					<view @tap="open('sendBoxStaus')">取消</view>
				</view>
			</view>

			<view class="window index999" v-if="moreBoxStaus">
				<view class="bottom_popup">
					<view>模版开单</view>
					<view>订单打印</view>
					<view @tap="open('moreBoxStaus')">取消</view>
				</view>
			</view>
		</block>
		<Loading ref="load"></Loading>
	</view> 
</template>

<script>
	export default{
		data(){
			return{
				boxHide: true,
				barNum: 0,
				list: [{
					status: 0
				}],
				type: ['未出库', '已发货', '已出库未安装', '已派工', '已保养'],
				typeIndex: -1,
				sendBoxStaus: false,
				moreBoxStaus: false,
				loading: true,
				page: 1,
				price: {},
				checked: false,
				order_schedule: [],
				end: "",
				start: "",
				showEmptyBtn:false,
				search: "",	
			}
		},
		props:{ // 组件参数
			customerId:{ // 客户id
				type:Number,
				default:0
			}
		},
		created(){
			 // html加载完成之前，执行。执行顺序：父组件-子组件
		},
		mounted(){
			// html加载完成后执行。执行顺序：子组件-父组件
			// this.$refs必须父组件渲染完毕之后才能正常访问内部的属性或方法
			this.end = this.$api.getNowTime();
			this.getData(1);
		},
		methods:{
			emptyValue(){
				this.search='';
				this.getData(1);
			},
			searchBtn() { //搜索
				this.getData(1);
			},
            getData(type) {
				this.$refs.load.initLoading({
					loadType: type
				}).then(res => {
					this.boxHide = false;
					this.$app.globalData.upData.order = false;
					if (type == 1) {
						this.list = [], this.page = 1, this.loading = true
					}
					let upJson = this.barNum == 0 ? {} : this.barNum == 1 ? {
						type: "意向订单"
					} : this.barNum == 2 ? {
						type: "成交待收"
					} : {
						type: "已经完成"
					}
					upJson.customer_id = this.customerId; // 设置客户id
					if (type == 1) {
						this.$api.getStatistics(upJson).then(res => {
							this.price = res
						})
					}
					
					// 关键字搜索
					if(this.search){
						upJson.search = this.search;
					}
					// 时间查询
					if (this.start.length > 0  && this.barNum != 0) {
						upJson.start = this.start;
						upJson.end = this.end
					
					}

					upJson.rows = 10;
					upJson.page = this.page
					this.$api.getOrderList(upJson).then(res => {
						this.$refs.load.getLoadingData({
							oldData: this.list,
							newData: res.data
						}).then(res => {
							this.loading = res.loading;
							this.list = res.list;
							this.page++;
						})
					})
					this.$api.getOrderSchedule().then(res => {
						this.order_schedule = res;
					})

				})
			},
			bar(index) { //导航
				if (this.barNum != index) {
					this.barNum = index;
					// this.list[0].status = index;
					this.getData(1)
				}
			},
			getPickerValue(e) {
				console.log(e)
				let itemIndex = e.currentTarget.dataset.index;
				let index = Number(e.detail.value)
				let schedule = this.order_schedule[index];
				this.list[itemIndex].schedule = schedule;

				let upJSon = {
					id: this.list[itemIndex].id,
					schedule: schedule
				}
				this.$api.editSchedule(upJSon).then(res => {
					uni.showToast({
						title: "修改成功",
						icon: "none"
					})
				})
			},
			open(obj) { //打开弹窗
				this[obj] = !this[obj]
			},
			checkStatus(item) { //审核
				let _this=this;
				uni.showModal({
					title: "提示",
					content:"确认提交审核?",
					success(res) {
						if(res.cancel) return false;
						_this.$api.getOrderAudit({
							id: item.id
						}).then((res) => {
							uni.showToast({
								title: '审核同步出库成功',
								icon: "none",
								mask: true,
								duration: 2000,
								success() {
									setTimeout(function() {
										_this.getData(1)
									}, 2000)
								}
							})
						})
					}
				})
			},
			getStart(e) {
				this.start = e.detail.value;
				this.getData(1);
			},
			getEnd(e) {
				this.end = e.detail.value;
				if (this.start.length > 0) {
					this.getData(1);
				}
			},
			checkOutBtn(id) { // 出库
				uni.navigateTo({
					url: "/pages/product/out/out?order_id=" + id
				})
			},
			collection(item) {
				uni.navigateTo({
					url:`/pages/order/collectMoney/collectMoney?id=`+item.id
				})
			},
			go(obj, id) { //页面跳转
				uni.navigateTo({
					url: "/pages/order/" + obj + "/" + obj + "?id=" + id
				})
			},
			navGo(url) {
				uni.navigateTo({
					url
				})
			},
			openWindow() {
				this.flag = !this.this.flag
			},
			// _error() {
			// 	//触发取消回调
			// 	// this.flag = false
			// },
			// _success(id) {
			// 	let that = this;
			// 	//触发成功回调
			// 	// if(this.checked === true){
				
			// },
			checkBox(e, item) {
				let that = this;
				that.checked = !that.checked;
			}
		}
	} 
</script>

<style>
	.finance_bar {
		width: 100%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #9BA7B7;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.finance_bar_picker {
		margin-right: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.finance_bar_picker image {
		width: 22upx;
		height: 10upx;
		margin-left: 10upx;
	}

	.finance_bar_btn {
		margin-left: auto;
		color: #333333;
	}
	.order{
		padding:20rpx;
	}
	.order .bar_top{
		position: static;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 998;
		border-bottom: 2rpx solid #EEEEEE;
		box-shadow: 10rpx 0 -10rpx #EEEEEE;
	} 
    
	.order_content {
		width: 100%;
		margin-top: 30upx;
	}

	.order_card {
		width: 100%;
		/* margin: 0 0 0 30upx; */
		padding: 30upx 0;
		background: #FFFFFF;
		font-size: 30upx;
		color: #333333;
		text-align: center;
	}

	.order_card_list {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.order_card_list1 {
		margin-bottom: 30upx;
	}

	.order_card_item {
		width: 50%;
	}

	.order_card_item:nth-child(1) {
		border-right: 2upx solid #EEEEEE;
	}

	.order_card_item view:nth-child(2) {
		font-size: 24upx;
		color: #9BA7B7;
		margin-top: 5upx;
	}

	.font_item {
		min-height: 60upx;
	}

	.order_item {
		margin-top: 20upx;
        width: 100%;
        margin-left: 0;
	}

	.wx-popup {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.popup-container {
		position: absolute;
		left: 50%;
		top: 120rpx;
		width: 80%;
		max-width: 600rpx;
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		box-sizing: bordre-box;
		transform: translate(-50%, 0%);
		overflow: hidden;
		background: #fff;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.wx-popup-title {
		width: 100%;
		padding: 20rpx;
		text-align: left;
		font-size: 30rpx;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.wx-popup-con {
		border-bottom: 2rpx solid #cccccc;
		padding: 60rpx 0rpx;
		margin-bottom: 10px;
	}

	.wx-content-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.weui-cell checkbox {
		margin-right: 0rpx;
	}

	.wx-popup-btn {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 40rpx;
	}

	.wx-popup-btn text {
		display: flex;
		align-items: center;
		width: 20%;
		height: 63rpx;
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		text-align: center;
		justify-content: center;
		color: #ffffff;
		margin-right: 20rpx;

	}

	.wx-popup-btn text:nth-child(1) {
		background: #f49326;
	}

	.wx-popup-btn text:nth-child(2) {
		background: #2f7f14;
	}

	.schedule {
		color: #007AFF;
		width: 100%;
	}

	.order_item_price_color1 {
		color: #ff0000;
	}

	.order_item_price_color2 {
		color: #ffc11f;
	}

	.order_item_price_color3 {
		color: #1aad19;
	}

	
</style>
